<template>
      <view class="my-search-container" :style="{'background':bgcolor}" @click="searchBoxHandler">
        <view class="my-seach-box" :style="{'border-radius':radius+'px'}">
          <uni-icons type="search" size="17"></uni-icons>
          <text class="placeholder">搜索</text>
        </view>
      </view>
  </template>

  <script>
    export default {
      props: {
        // 背景颜色
        bgcolor: {
          type: String,
          default: '#C00000'
        },
        // 圆角尺寸
        radius: {
          type: Number,
          // 单位是 px
          default: 18
        }
      }, 
      name: "my-search",
      data() {
        return {

        };
      },
      methods: {
        searchBoxHandler(){
          console.log('~~~~~~~~~~~~~~')
          this.$emit('click')
        }
      }
    }
  </script>

  <style lang="scss">
    .my-search-container {
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 10px;

      .my-seach-box {
        width: 100%;
        height: 36px;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;

        .placeholder {
          font-size: 15px;
          font-weight: bolder;
          margin-left: 5px;
        }
      }
    }
  </style>
